<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机交通标识页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>

</head>

<body>
<!-----------头部开始--------------->
<%@ include file="page_head.jsp"%>
<!-----------头部结束--------------->
<!-----------内容开始--------------->
 <div class="content">
    <div class="biaoshitop">&nbsp;</div>
   <div class="titlecom">
      <p class="video_p"><a href="jiaotong_biaoshi_detail.jsp">所有标识</a></p>
      <div class="tabtila fr">
        <a href="javascript:changeIcon('');">全部</a> | <a href="javascript:changeIcon('禁令标志');">禁令标志</a>
          | <a href="javascript:changeIcon('指示标志');">指示标志</a>
        <a href="javascript:;" class="titlemore"><img src="images/title_69.jpg"/></a>
      </div>          
      <div class="moresort" id="moresort_div_parent">
        <div class="moresost_con" id="moresort_div">


        </div>
      </div>
   </div>
   <ul class="biaoshi_ul" id="icon_ul">
<%--      <li>--%>
<%--        <a href="jiaotong_biaoshi_detail.jsp"><img src="images/biao_03.jpg"/><p>警告标志(-)</p></a>--%>
<%--      </li>--%>
      <div class="clear"></div>
   </ul>
   <div class="pageturn">
     <div class="prepage"><a href="javascript:lastPage();">< 上一页</a></div>
     <p><span><b id="current_page">1</b>/<label id="total_page">0</label></span></p>
    <div class="prepage"> <a href="javascript:nextPage();">下一页 ></a></div>
   </div>
 </div>
 <!-----------内容结束--------------->
<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>
 
</body>
<!--头部高度赋给列表的topjs-->


<script>
    $("#page_head_title").text("交通标识");

    var layer;
    layui.use('layer',function(){
        layer=layui.layer;
    })

    var icon_class_hidden="";
    var array_icon=[];
    var current_page=1;
    var total_page=0;
    var flag_title=true;
    window.onload=function(){
        initSort();
        initIcon();
    }

    function initSort(){
        // <span><a href="javascript:changeIcon('');">2015驾考</a></span>
        var array_str=['禁令标志','警告标志','指示标志','指路标志','交通手势信号','旅游区标志','道路施工安全标志','辅助标志','其它标志'];
        $("#moresort_div").empty();
        for(var i=0;i<9;i++){
            var span=$("<span></span>");
            var a=$("<a></a>").attr("href","javascript:changeIcon('"+array_str[i]+"');").text(array_str[i]);
            span.append(a);
            $("#moresort_div").append(span);
        }
        var div_clear=$("<div></div>").attr("class","clear");
        $("#moresort_div").append(div_clear);
    }

    function initIcon(){
        changeIcon('');
    }
    function changeIcon(icon_class){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_icon/icon_init.do",
            data:{
                "icon_class":icon_class
            },
            success:function(data,status){
                if(status=="success"){
                    icon_class_hidden=icon_class;
                    array_icon=data;
                    current_page=1;
                    total_page=Math.ceil(data.length/12);
                    changeUl(data,1);
                    $("#current_page").text(current_page);
                    $("#total_page").text(total_page);
                }
            }
        });

        $("#moresort_div_parent").attr("style","display: none;");
        $(".titlemore img").attr("src","images/title_69.jpg");
        flag_title=true;
    }

    function changeUl(data,page){
        $("#icon_ul").empty();
        var path="${pageContext.request.contextPath}/img_artificial/icon_img/";
        var index_start=(page-1)*12;
        var index_end=index_start+12;
        if(page==total_page||total_page==0){
            index_end=data.length;
        }
        for(var i=index_start;i<index_end;i++){
            var li=$("<li></li>");
            var a=$("<a></a>").attr("href","javascript:to_icon_detail("+i+");");
            var img=$("<img>").attr("src",path+data[i].icon_img);
            var p=$("<p></p>").text(data[i].icon_name);
            a.append(img,p);
            li.append(a);
            $("#icon_ul").append(li);
        }
        var div_clear=$("<div></div>").attr("class","clear");
        $("#icon_ul").append(div_clear);
    }

    function to_icon_detail(index){
        // layer.alert("index:"+index+"icon_class_hidden:"+icon_class_hidden);
        var w=$(window).width()*0.75;
        var h=$(window).height()*0.6;
        layer.open({
             type:2
            ,area:[w+'px',h+'px']
            ,title:' '
            ,shade:0.4
            // ,closeBtn:0
            ,shadeClose:true
            ,content:"jiaotong_biaoshi_detail.jsp?icon_class_hidden="+icon_class_hidden+"&icon_index_hidden="+index
        });

    }

    function lastPage(){
        if(current_page<=1){
            layer.msg("这已经是第一页了");
        }else{
            current_page--;
            changeUl(array_icon,current_page);
            $("#current_page").text(current_page);
        }
    }

    function nextPage(){
        if(current_page>=total_page){
            layer.msg("这已经是最后一页了");
        }else{
            current_page++;
            changeUl(array_icon,current_page);
            $("#current_page").text(current_page);
        }
    }






    $(".titlemore").click(function (){
        if(flag_title){
            $("#moresort_div_parent").attr("style","display: block;");
            $(".titlemore img").attr("src","images/title_692.jpg");
            flag_title=false;
        }else{
            $("#moresort_div_parent").attr("style","display: none;");
            $(".titlemore img").attr("src","images/title_69.jpg");
            flag_title=true;
        }

    })
</script>









<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})
 </script>
 
<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("#incltialiu li:eq(0) img").height();
   $(".main,.width,#incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	// $(".titlemore").toggle(function(){
	// 	$(this).parent(".tabtila").siblings(".moresort").show()
	// 	$(this).children("img").attr("src","images/title_692.jpg")
	// 	},function(){
	// 	$(this).parent(".tabtila").siblings(".moresort").hide()
	// 	$(this).children("img").attr("src","images/title_69.jpg")
	// 	})

  </script>
 <!--首页标题点击出现更多分类js-->
</html>
